<template>
  <div class="good-buy-info">
                  <div class="img">
                        <img :src="goodPic" alt="">
                  </div>
                  <div class="box">
                          <h3>{{goodsName}}</h3>
                          <p>颜色：{{specType}}&nbsp;&nbsp;尺码：{{spec}}</p>
                          <h4 class="price"><span>¥</span>{{goodsPrice}}</h4>
                          <h5>x{{goodsNum}}</h5>
                  </div>
            </div>
</template>
<script>

  export default {
    name:'good-info',
    props:[
      'goodPic',
      'goodsName',
      'specType',
      'spec',
      'goodsPrice',
      'goodsNum',
      '',
    ]
  }
</script>
<style scoped>
.good-buy-info{
  display: flex;
  margin-top: 30px;
}
.good-buy-info .img{
  width: 24.6%;
  margin-right: 10px;
  align-items:flex-start;

}
.good-buy-info .img img{
  width: 100%;
}
.good-buy-info .box{
  flex:1;
  position: relative;
}
.good-buy-info h3{
  font-size: 12px;
  margin-top: 3px;
  line-height: 24px;
}
.good-buy-info p{
  color:#919191;
}
.good-buy-info h4{
  margin-top: 15px;
  color:#f04b3e;
}
.good-buy-info h5{
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
